import React, { Component } from 'react';
import { BrowserRouter, Router, Switch, Route, Redirect } from 'react-router-dom';
import history from './history'
import Header from './components/Header';
import Footer from './components/Footer';
import Content from './components/Content';
import Tab from './components/Tab';
import CompanyApp from './CompanyApp.js';
import ScrollToTop from './components/common/ScrollToTop'
import Login from './Login'
import './App.css'

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      userName: '',
      showLogin: false
    }
    this.loginSuccess = this.loginSuccess.bind(this)
  }

  onLogin() {
    //禁止滚动
    document.body.style.overflow = 'hidden'
    this.setState({
      showLogin: true
    })
  }

  onClose() {
    document.body.style.overflow = 'auto'
    this.setState({
      showLogin: false
    })
  }


  loginSuccess() {
    this.onClose()
  }

  onForget() {
    this.onClose()
    // history.push('/mainPage/resetPwd')
  }

  render() {
    const { showLogin } = this.state
    return (
      // <BrowserRouter basename="/test" />
      <BrowserRouter>
        {/* <Router history={history} > */}
        <div className="App">
          {showLogin && <Login 
            onClose={() => this.onClose()} 
            onForget={() => this.onForget()}
            loginSuccess={this.loginSuccess}
          />}
          <ScrollToTop>
            <Switch>
              {/* homePage - 重定向 */}
              <Route exact path='/' render={()=> <Redirect to={'/mainPage/main'} /> } />

              <Route path="/mainPage" children={
                <div className="mainPage">
                  <Header 
                    onLogin={() => this.onLogin()} 
                  />
                  <Tab />
                  <Switch>
                    <Content/>
                  </Switch>
                  <Footer />
                </div>
              } />

              {/* 机构主页 */}
              <Route exact path='/org' render={() => <Redirect to={'/mainPage/org'} />} />
              <Route path='/org/:orgType' component={CompanyApp} />

            </Switch>
          </ScrollToTop>
        </div>
        {/* </Router> */}
      </BrowserRouter>
    );
  }
}

export default App;
// module.exports = App
